先說一下，正常專案不會在local寫完後直接推到main，通常會有dev, sandbox, prod環境，我這邊是想focus在自己想玩的區塊，所以才把環境簡化成只有一個。

將changes commit到main後，主要要做的事情有三個：

1. 設定firebase key 為環境變數
2. 跑Day-23寫的單元測試
3. 自動deploy到git page

ps. 我是CICD初學者，很多步驟是google & gpt來的，應該是有更好更有系統的方式來寫這些。

目錄

• github Action ymal檔的設計
• Github設定firebase的那組key
• 跑Day-23寫的單元測試
• 自動deploy到git page

github Action .ymal檔的設計

步驟有三：
build -> unit test -> deploy 到git page，所以會有三個jobs。
這邊會把firebase的key會在build裡設定好，這樣在deploy的時候專案才吃得到firebase的keys。
先把.ymal框架寫好: 去repository > Actions新增new workflow，然後完整版在最下面。

Github設定firebase的那組key

到repository -> Settings -> secrets and variables -> new repository secret
把一組組key & value 輸入進去，在想應該有更好的方式輸入入吧XD只是我不知道而喔，一組組操作UI輸入有點崩潰。

分享一下我犯的錯誤，一開始在寫.ymal檔時，我把設定firebase keys的環境變數自己寫一個job，並且放在最後一步，導致即便部署成功，網頁也一直報錯:

FirebaseError: Firebase: Error (auth/invalid-api-key).

解決方式就是把設定firebase keys的那個job移到部署到git page之前的job，我這邊是直接放在build的那個job啦...

跑Day-23寫的單元測試

單元測試在上一篇已經寫完，本篇主要是寫進CI裡，可以直接看最下面jobunitTest的部分。

自動deploy到git page

# {PROJECT}/.github/workflows/main.yaml
# https://github.com/actions/deploy-pages#usage
name: Deploy to GitHub Pages
on:
  workflow_dispatch:
  push:
    branches:
      - main
jobs:
  build:
    env: 
      NUXT_APP_BASE_URL: /Nuxt3Ecommerce/
      FIREBASE_API_KEY: ${{ secrets.FIREBASE_API_KEY }}
      FIREBASE_AUTH_DOMAIN: ${{ secrets.FIREBASE_AUTH_DOMAIN }}
      FIREBASE_PROJECT_ID: ${{ secrets.FIREBASE_PROJECT_ID }}
      FIREBASE_STORAGE_BUCKET: ${{ secrets.FIREBASE_STORAGE_BUCKET }}
      FIREBASE_MESSAGING_SENDER_ID: ${{ secrets.FIREBASE_MESSAGING_SENDER_ID }}
      FIREBASE_APP_ID: ${{ secrets.FIREBASE_APP_ID }}
      FIREBASE_MEASUREMENT_ID: ${{ secrets.FIREBASE_MEASUREMENT_ID }}
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - run: corepack enable
      - uses: actions/setup-node@v3
        with:
          node-version: "20"
      # Pick your own package manager and build script
      - run: npm install
      - run: npx nuxt build --preset github_pages
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v1
        with:
          path: ./.output/public
  
  unitTest:
    needs: build
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Use Node.js "20"
        uses: actions/setup-node@v3
        with:
          node-version: "20"
          cache: "npm"
      - name: Execute Unit tests
        run: |
          npm ci
          npm run test 
    
  # Deployment job
  deploy:
    # Add a dependency to the build job
    needs: unitTest
    # Grant GITHUB_TOKEN the permissions required to make a Pages deployment
    permissions:
      pages: write      # to deploy to Pages
      id-token: write   # to verify the deployment originates from an appropriate source
    # Deploy to the github_pages environment
    environment:
      name: github_pages
      url: ${{ steps.deployment.outputs.page_url }}
    # Specify runner + deployment step
    runs-on: ubuntu-latest
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v1